<template>
  <AdaptiveNavBar title="班期详情" :showBack="true" :showHome="false" />
  <view class="content-area" :style="{ marginTop: $navbarUtil.getNavbarTotalHeightRpx() }">
    <view class="camp-detail-container">
      <!-- 主内容区域 -->
      <view class="content-container">
        <view class="content-wrapper">
          <!-- 已选班期信息区块 -->
          <view class="info-section">
            <view class="section-header">
              <view class="header-content">
                <text class="section-title">已选班期</text>
                <text class="period-date">{{ period.availableDate ? period.availableDate.yearDate + '-' +
                  period.availableDate.monthDate + '-' + period.availableDate.dayDate : '' }}</text>
              </view>
            </view>
          </view>

          <!-- 渠道协作商家信息区块 -->
          <view class="info-section">
            <view class="section-header">
              <view class="header-content">
                <text class="section-title">渠道协作商家</text>
              </view>
            </view>
            <view class="merchant-info-section">
              <!-- 商家基本信息 -->
              <view class="merchant-header">
                <view class="merchant-type-tag">{{ quanju.StandbyFieldThree || '组团' }}</view>
                <text class="merchant-name">{{ merchant.name }}</text>
              </view>

              <!-- 客源城市信息 -->
              <view class="info-row">
                <text class="info-label">客源城市</text>
                <text class="info-value">{{ quanju.Address || '此处暂无' }}</text>
              </view>

              <!-- 联系方式 -->
              <view class="contact-row">
                <view class="contact-info">
                  <text class="info-label">{{ merchant.authPerson }}</text>
                  <text class="info-value">{{ merchant.phone }}</text>
                </view>
                <button class="call-button" :data-tel="merchant.phone" @tap="bohao">拨号</button>
              </view>

              <!-- 其他联系人列表 -->
              <template v-for="(personItem, idx) in person" :key="idx">
                <view class="contact-row">
                  <view class="contact-info">
                    <text class="info-label">{{ personItem.name }}</text>
                    <text class="info-value">{{ personItem.phone }}</text>
                  </view>
                  <button class="call-button" :data-tel="personItem.phone" @tap="bohao">拨号</button>
                </view>
              </template>
            </view>
          </view>

          <!-- 申请名额-答复信息区块 -->
          <view class="info-section">
            <view class="section-header">
              <view class="header-content">
                <!-- <image class="section-icon" :src="'https://wxapi.qctrips.cn/yx/images/goods/date.png'" mode="" /> -->
                <text class="section-title">申请名额-答复</text>
              </view>
            </view>
            <view class="quota-info-content">
              <div class="quota-item">
                <div class="quota-header">
                  <span class="quota-label">每团满员名额上限数</span>
                  <span class="quota-value">{{ period.fullNumberOfPeople || 0 }} 人</span>
                </div>
                <div class="quota-description">
                  报名达到该人数后，系统将限制后续报名
                </div>
              </div>

              <div class="quota-item">
                <div class="quota-header">
                  <span class="quota-label">每期最低成团人数</span>
                  <span class="quota-value">{{ period.leastNumberOfPeople || 0 }} 人</span>
                </div>
                <div class="quota-description">
                  低于该人数系统自动退费/解散行程/通知延期
                </div>
              </div>

              <div class="quota-item">
                <div class="quota-header">
                  <span class="quota-label">每期服务最大承载团数</span>
                  <span class="quota-value">{{ period.fullNumberOfRegiment || 0 }} 团</span>
                </div>
                <div class="quota-description">
                  低于该人数系统自动退费/解散行程/通知延期
                </div>
              </div>
            </view>
          </view>

          <!-- 成团确认日期信息区块 -->
          <view class="info-section">
            <view class="section-header">
              <view class="header-content">
                <!-- <image class="section-icon" :src="'https://wxapi.qctrips.cn/yx/images/goods/date.png'" mode="" /> -->
                <text class="section-title">成团确认日期</text>
              </view>
            </view>
            <view class="confirm-date-content">
              <div class="confirm-date-item">
                <span class="confirm-date-label">行程日前</span>
                <span class="confirm-date-value">{{ period.applicationDeadline || 0 }} 天</span>
              </div>
            </view>
          </view>

          <!-- 已报名信息区块（仅报名详情时显示） -->
          <view v-if="goType === '报名详情'" class="info-section">
            <view class="section-header">
              <view class="header-content">
                <!-- <image class="section-icon" :src="'https://wxapi.qctrips.cn/yx/images/goods/date.png'" mode="" /> -->
                <text class="section-title">已报名信息</text>
              </view>
            </view>
            <view class="stats-container">
              <view class="stats-item">
                <div class="stats-data">
                  <span class="stats-number stats-orange">4</span>
                  <span class="stats-desc">组团团数</span>
                </div>
              </view>

              <view class="stats-item">
                <div class="stats-data">
                  <span class="stats-number stats-green">3</span>
                  <span class="stats-desc">工作人员</span>
                </div>
              </view>

              <view class="stats-item">
                <div class="stats-data">
                  <span class="stats-number stats-green">3</span>
                  <span class="stats-desc">儿童数</span>
                </div>
              </view>
            </view>
          </view>
        </view>
      </view>

      <!-- 底部操作按钮（仅答复申请时显示） -->
      <view v-if="goType === '答复申请'" class="bottom-actions">
        <button class="action-button reject-button" @tap="no">拒绝申请</button>
        <button class="action-button accept-button" @tap="ok">同意申请</button>
      </view>
    </view>
  </view>
</template>

<script>
import { request } from '../../utils/request';

export default {
  data() {
    return {
      StatusBar: 0,
      TabbarBot: 0,
      SiteId: 0,
      backgroundColor: '#007aff',
      checkbox_tag: [],
      feilv: 0.06,
      fold: false,
      info: [],
      datelist: [],
      quanju: {},
      person: [],
      id: 0,
      goType: null,
      merchantId: '',
      relationId: '',
      merchant: {},
      period: {}
    }
  },
  onLoad(options) {
    const { id, goType, merchantId, relationId } = options;
    this.id = id;
    this.goType = goType;
    this.merchantId = merchantId;
    this.relationId = relationId;
    console.log("merchantId", this.merchantId);

    if (this.merchantId) {
      this.getMerchant();
    }
    if (this.id) {
      this.getPeriod();
    }
  },
  methods: {
    async getMerchant() {
      try {
        const res = await request({
          url: `/merchant/getMerchantById?merchantId=${this.merchantId}`,
          method: 'GET'
        });

        if (res.code == 200) {
          this.merchant = res.data;
          console.log('商家信息', res.data)
        }
      } catch (error) {
        console.error('获取商家信息失败:', error);
      }
    },
    async getPeriod() {
      try {
        const res = await request({
          url: `/period-sku/getPeriodById?id=${this.id}`,
          method: 'GET'
        });

        if (res.code == 200) {
          this.period = res.data;
          this.person = res.data.contact;
          console.log('联系人', res.data.contact)
        }
      } catch (error) {
        console.error('获取班期信息失败:', error);
      }
    },
    bohao(e) {
      const i = e.currentTarget.dataset.tel;
      uni.makePhoneCall({
        phoneNumber: i,
      });
    },
    no() {
      uni.showModal({
        title: '请输入原因',
        editable: true,
        placeholderText: '请输入评论内容',
        complete: async (res) => {
          console.log(res);
          if (res.cancel) {
            uni.showToast({
              title: '已取消！',
              icon: 'error',
              mask: true,
              duration: 1500,
            });
          }

          if (res.confirm) {
            try {
              let data = {
                "relationId": this.relationId,
                "reply": res.content,
                "status": 2
              };
              const response = await request({
                url: `/call-apply/handle`,
                method: 'POST',
                data: data
              });

              if (response.code == 200) {
                uni.showToast({
                  title: '操作成功',
                  icon: 'none'
                });
                uni.navigateBack();
              }
            } catch (error) {
              console.error('拒绝申请失败:', error);
              uni.showToast({
                title: '拒绝失败请重试',
                icon: 'error',
                mask: true,
                duration: 1500
              });
            }
          }
        }
      });
    },
    async ok() {
      try {
        let data = {
          "relationId": this.relationId,
          "reply": '',
          "status": 1
        };
        const response = await request({
          url: `/call-apply/handle`,
          method: 'POST',
          data: data
        });

        if (response.code == 200) {
          uni.showToast({
            title: '操作成功',
            icon: 'none'
          });
          uni.navigateBack();
        }
      } catch (error) {
        console.error('同意申请失败:', error);
        uni.showToast({
          title: '操作失败请重试',
          icon: 'error',
          mask: true,
          duration: 1500
        });
      }
    }
  }
}
</script>

<style scoped>
.content-area {}

/* 主容器样式 */
.camp-detail-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 内容容器样式 */
.content-container {
  padding-bottom: 120rpx;
  /* 为底部按钮留出空间 */
}

.content-wrapper {
  padding: 20rpx;
}

/* 通用信息区块样式 */
.info-section {
  margin-bottom: 20rpx;
  background-color: #FFFFFF;
  border-radius: 20rpx;
  overflow: hidden;
}

/* 区块头部样式 */
.section-header {
  padding: 0 20rpx;
  height: 96rpx;
  background-color: white;
  border-bottom: 1px solid #f1f1f1;
}

.header-content {
  display: flex;
  align-items: center;
  height: 100%;
}

.section-icon {
  width: 20px;
  height: 20px;
  margin-left: -30rpx;
  margin-right: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
  flex: 1;
}

.period-date {
  font-size: 28rpx;
  color: #666;
  margin-left: 150rpx;
}

/* 商家信息区块样式 */
.merchant-info-section {
  padding: 20rpx;
}

.merchant-header {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.merchant-type-tag {
  background: rgba(252, 100, 47, 0.1);
  border-radius: 6rpx;
  padding: 4rpx 16rpx;
  font-size: 24rpx;
  color: #FC642F;
  margin-right: 16rpx;
}

.merchant-name {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
}

/* 信息行通用样式 */
.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-label {
  font-size: 28rpx;
  color: #666;
  margin-right: 20rpx;
  min-width: 120rpx;
}

.info-value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  text-align: right;
}

/* 联系人信息行样式 */
.contact-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.contact-info {
  display: flex;
  align-items: center;
  flex: 1;
}

/* 拨号按钮样式 */
.call-button {
  border-radius: 30rpx;
  border: 1rpx solid #4A90FF;
  color: #4A90FF;
  font-size: 28rpx;
  font-weight: 500;
  white-space: nowrap;
  background-color: white;
  margin: 0 0 0 50rpx;
}

.call-button:active {
  background-color: #f5f5f5;
}

/* 配额信息内容样式 */
.quota-info-content {
  padding: 20rpx;
}

.quota-item {
  margin-bottom: 20rpx;
}

.quota-item:last-child {
  margin-bottom: 0;
}

.quota-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.quota-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.quota-value {
  font-size: 28rpx;
  color: #333;
}

.quota-description {
  font-size: 20rpx;
  color: #999;
  margin-bottom: 20rpx;
}

/* 确认日期内容样式 */
.confirm-date-content {
  padding: 20rpx;
}

.confirm-date-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.confirm-date-label {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}

.confirm-date-value {
  font-size: 28rpx;
  color: #333;
}

/* 统计信息容器样式 */
.stats-container {
  display: flex;
  flex-wrap: wrap;
  padding: 20rpx;
}

.stats-item {
  flex: 1;
  min-width: 30%;
  text-align: center;
}

.stats-data {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stats-number {
  font-size: 40rpx;
  font-weight: 600;
  display: block;
  margin-bottom: 8rpx;
}

.stats-orange {
  color: #FF9500;
}

.stats-green {
  color: #34C759;
}

.stats-desc {
  font-size: 24rpx;
  color: #666;
}

/* 底部操作按钮样式 */
.bottom-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30rpx;
  background: #FFFFFF;
  box-shadow: 0rpx -4rpx 14rpx 0rpx rgba(241, 241, 241, 0.5);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.action-button {
  width: 222rpx;
  height: 76rpx;
  line-height: 76rpx;
  text-align: center;
  border-radius: 38rpx;
  font-size: 28rpx;
  margin: 0;
}

.reject-button {
  color: #007aff;
  border: 2rpx solid #007aff;
  background-color: white;
}

.accept-button {
  background: #007aff;
  color: #FFFFFF;
  border: none;
}

/* 按钮统一样式重置 */
button {
  outline: none;
}

button::after {
  border: none;
}
</style>
